<template>
    <h2>新闻资讯</h2>
    <ul>
        <li v-for="(item,index) in data.news" :key="index" class="item">
            <div>{{ item.title }}</div>
            <div>{{ item.content }}</div>
            <div>{{ item.auth }}</div>
            <div>
                <button @click="goDetail(item.id)">详情</button>
                <button @click="goUpate(item.id)">修改</button>
            </div>
        </li>
    </ul>
</template>
<script lang='ts' setup>
import {useRouter} from 'vue-router'
import {reactive} from 'vue'
const router=useRouter()
const data=reactive({
    news:[
        {id:'news1001',title:'新闻1',content:'新闻内容1',auth:'作者1'},
        {id:'news1002',title:'新闻2',content:'新闻内容2',auth:'作者2'},
        {id:'news1003',title:'新闻3',content:'新闻内容3',auth:'作者3'},
        {id:'news1004',title:'新闻4',content:'新闻内容4',auth:'作者4'},
        {id:'news1005',title:'新闻5',content:'新闻内容5',auth:'作者5'}
    ]
})
const goDetail=(arg:string)=>{
    router.push(`/news/${arg}`)
    
}
const goUpate=(arg:string)=>{

    router.push('/newsModify?id='+arg)

}
</script>
<style lang='scss' scoped>
 ul{
    // width: 500px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 15px;
    list-style-type: none;
    .item{
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        height: 50px;
        margin: 20px;
        background-color: #f5f5f5;
    }
 }
</style>